<template>
    <view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">门店信息</block>
		</cu-custom>
        <view class="padding list" v-if="info.uid&&info.mch">
            <view class="text-center text-grey margin-bottom-sm text-sm">所属商户</view>
			<view class="item bg-white radius-lg padding-sm margin-bottom">
				<view class="crow">
					<view class="left avatar margin-left-sm">
						<image :src="info.mch.logo" lazy-load mode="" class="img"></image>
					</view>
					<view class="right">
						<view class="top crow space-between">
							<view class="left-box">
								<text class="padding-right-mn text-black text-bold">{{ info.mch.title }}</text>
							</view>
						</view>
						<view class="center text-sm text-gray crow space-between">
							<view class="left-box">
								<text class="padding-left-mn">{{ info.mch.city }} {{ info.mch.area }} {{ info.mch.street }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
            <view class="text-center text-grey margin-bottom-sm text-sm">所属门店</view>
			<view class="item bg-white radius-lg padding-sm" v-if="info.shop"
				@tap="$utils.$page.open('/pages/mch/details?id=' + info.shop.id)">
				<view class="crow">
					<view class="left avatar margin-left-sm">
						<image :src="info.shop.logo" lazy-load mode="" class="img"></image>
					</view>
					<view class="right">
						<view class="top crow space-between">
							<view class="left-box">
								<text class="padding-right-mn text-black text-bold">{{ info.shop.title }}</text>
							</view>
						</view>
						<view class="center text-sm text-gray crow space-between">
							<view class="left-box">
								<text class="padding-left-mn">{{ info.shop.city }} {{ info.shop.area }} {{ info.shop.street }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
        </view>
		<view class="flex flex-direction justify-center" v-else>
			<emptyData type="notOrder" text="您未与商户签约"></emptyData>
		</view>
		<loading v-if="pageLoading" />
    </view>
</template>
<script>
export default {
    data(){
        return {
            pageLoading:false,
            info:{}
        }
    },
    onLoad() {
        this.getList();
    },
    methods:{
        getList(){
            this.pageLoading=true;
            this.$utils.$api.Technician.shop().then(data=>{
                this.info=data;
            }).catch(()=>{}).finally(()=>{
                this.pageLoading=false
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.list {
	.item {
		.avatar {
			position: relative;
			width: 170upx;
			height: 170upx;
			display: flex;
			align-items: center;

			.img {
				width: 130upx;
				height: 130upx;
				border-radius: 20upx;
			}

			.title-img {
				width: 210upx;
				height: 175upx;
				position: absolute;
				left: -20rpx;
			}
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 120upx;

			.top {
				.status {
					border: 2rpx solid var(--theme-color);
					font-size: 20rpx;

					.zuizao {
						background-color: var(--theme-color);
						padding: 5rpx;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						color: white;
					}

					.time {
						padding: 5rpx;
					}
				}
			}
		}
	}
}

</style>